<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1 {
				width: 50px;
				height: 50px;
				background: red;
				border-radius: 50%;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<div id="div1"></div>
		<script>
			/*
			 * document 的鼠标点击事件：
			 * 1 获取鼠标点击的坐标
			 * 2就算图形的位置
			 * 3 显示图形（在鼠标点击的位置）
			 */
			var circle=document.getElementById('div1')
			window.onclick = function() {
				//页面/文档的鼠标点击事件
				var x=event.pageX;
				var y=event.pageY;
				//计算图形位置
				x=x-circle.offsetWidth/2;
				y=y-circle.offsetWidth/2;
				
				//图形显示在点击的位置
				circle.style.left=x+'px';
				circle.style.top=y+'px';
			};
		</script>
	</body>

</html>